<template>
  <el-card shadow="never">
    <el-row :gutter="10">
      <el-col :span="10">
        <el-form ref="registerForm" :model="user" :rules="rules" label-position="top" label-width="80px">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="user.username" placeholder="必填" />
          </el-form-item>
          <el-form-item label="电话号码" prop="cellPhoneNumber">
            <el-input v-model="user.cellPhoneNumber" placeholder="必填" />
          </el-form-item>
          <el-form-item label="人脸模型" prop="selectedFaceRecognitionModelLabel">
            <el-input v-model="selectedFaceRecognitionModelLabel" :readonly="true" placeholder="必填" />
            <input v-model="selectedFaceRecognitionModelValue" type="hidden">
          </el-form-item>
          <el-form-item label="采集图像" prop="photos">
            <div>
              <ul v-if="!!user.photos.length" class="el-upload-list el-upload-list--picture-card">
                <li v-for="(photo, idx) in user.photos" :key="idx" tabindex="0" class="el-upload-list__item is-success">
                  <img :src="photo" class="upload-image">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(photo)">
                      <i class="el-icon-zoom-in" />
                    </span>
                    <span class="el-upload-list__item-delete" @click="handleRemove(idx)">
                      <i class="el-icon-delete" />
                    </span>
                  </span>
                </li>
              </ul>
              <div v-if="user.photos.length < 5" class="el-upload el-upload--picture-card">
                <i class="el-icon-plus" />
              </div>
            </div>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="preview">
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" :disabled="collectBtnDisabled" @click="onCollect">采集</el-button>
            <el-button type="primary" :loading="addLoading" @click="onAdd('registerForm')">立即创建</el-button>
            <el-button @click="onReset('registerForm')">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="14">
        <face-detector ref="faceDetector" width="640" height="480" @screenShot="handleScreenShot" />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import FaceDetector from '@/components/FaceDetector'
import { addUser } from '@/api/user'

export default {
  components: {
    FaceDetector
  },
  data() {
    return {
      user: {
        username: '',
        cellPhoneNumber: '',
        photos: []
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        cellPhoneNumber: [{ required: true, message: '请输入电话号码', trigger: 'blur' }],
        photos: [{ type: 'array', required: true, message: '请先采集图像' }]
      },
      dialogImageUrl: '',
      dialogVisible: false,
      collectBtnDisabled: false,
      addLoading: false
    }
  },
  computed: {
    ...mapState({
      selectedFaceRecognitionModelLabel: state => state.setting.selectedFaceRecognitionModelLabel,
      selectedFaceRecognitionModelValue: state => state.setting.selectedFaceRecognitionModelValue
    })
  },
  created() {
    this.$store.dispatch('setting/getSelectedFaceRecognitionModel')
  },
  methods: {
    handleRemove(idx) {
      // console.log(this.user.photos.length, idx)
      if (this.user.photos && idx < this.user.photos.length) {
        this.user.photos.splice(idx, 1)
      }
    },
    handlePictureCardPreview(photo) {
      this.dialogImageUrl = photo
      this.dialogVisible = true
    },
    onCollect() {
      this.collectBtnDisabled = true
      this.$refs.faceDetector.takeScreenShot()
    },
    handleScreenShot(data) {
      if (this.user.photos.length < 5) {
        this.user.photos.push(data)
      }
      this.collectBtnDisabled = false
    },
    onAdd(formName) {
      this.addLoading = true
      this.$refs[formName].validate(valid => {
        if (valid) {
          const data = {
            'username': this.user.username,
            'cell_phone_number': this.user.cellPhoneNumber,
            'model_id': this.selectedFaceRecognitionModelValue,
            'photos': this.user.photos
          }
          addUser(data).then(res => {
            if (res.success) {
              this.$message.success('Success!!!')
              this.onReset('registerForm')
            } else {
              this.$message.error(res.message)
            }
            this.addLoading = false
          }).catch(error => {
            this.$message.error(error.message)
            this.addLoading = false
          })
        } else {
          this.addLoading = false
          return false
        }
      })
    },
    onReset(formName) {
      this.$refs[formName].resetFields()
      this.user.username = ''
      this.user.cellPhoneNumber = ''
      this.user.photos = []
      this.addLoading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload-list--picture-card {
  display: inline-flex;
}
.el-upload-list--picture-card .el-upload-list__item {
  width: 75px;
  height: 75px;
  margin: 0 8px 0 0;
}
.upload-image {
  width: 100%;
}
.el-upload--picture-card {
  width: 75px;
  height: 75px;
  line-height: 85px;
}
</style>
